<template>
  <div class="about">
    <!-- v-html:类似innerHTML,富文本解析,不能解析vue指令 -->
    <div>{{ num }}</div>
    <div v-html="msg"></div>
    <div v-html="str"></div>
    <!-- v-text="文本内容" 类似innerText-->
    <div v-text="msg"></div>
    <div v-text="str"></div>
    <!-- {{}}  :局部内容的渲染 ,一句话表达式 变量，基本运算，三元表达式-->
    <!-- v-if="boolean" true:渲染  false: 不渲染 v-if/v-else-if v-else一定要是相邻的兄弟 标签 -->
    <div v-if="bol">if渲染</div>
    <div v-else>else渲染</div>
    <!-- v-show="boolean" true:显示  false:不显示 -->
    <div v-show="!bol">show渲染</div>
    <!-- v-if/v-show:区别：
       1：v-if控制标签是琐渲染，v-show控制是否显示(display:none)
       2:v-if它有v-else-if/v-else
       3:频繁切换时优先用v-show
         多条件处理优先用v-if
         实际开发：v-if  -->
    <!--  v-model:只是用于部分表单(input,textarea,checkbox,select)元素
          v-model='变量'
          作用：值的双向绑定
          常用修饰符:
             .trim:去掉首尾空格
             .lazy:延迟执行(执行时机：失去焦点，回车时)
             .number:值为数字类型
     -->
    <h3>{{ val }}</h3>
    <input type="text" v-model.lazy="val" />
    <!-- v-on:事件名='function'
         常用修饰符：
            .stop:阻止冒泡
            .prevent:阻止默认事件
    -->
    <a href="http://www.baidu.com" @click.prevent.stop="btnClick">按钮</a>
    <!-- v-bind:属性名='值'
         v-bind="{属性名:值}"
         :class="{class类名:boolean值}"
         :style="{属性名:值}"     -->
    <div v-bind="obj" :xxx="123" :class="{ box: isBox }">bind绑定</div>
    <button @click="isBox = !isBox">控制是否使用box的class</button>
    <div :style="{ color: isBox ? '#f00' : '#000' }">bind绑定style</div>
    <!-- v-for="(item,index) in 数组"   :key="有id优先用id,没有用index(不可重复)"
        item:数组中的每一项
        index:下标
        使用范围只限当前标签和子标签
        key:提升渲染效率（vue底层通过虚拟dom使用diff算法进行渲染，key相同的项对比渲染）
            li   张三  key=1      li   王五
            li   李四  key=2      li   张三         key=1
                                  li   李四         key=2
        v-for能与v-if一起使用吗？
        怎么解决一起使用？
           1:使用v-show
           2:使用template包一层再加v-for

       v-for能循环对象吗？
       {key:value}
         v-for="(value,key,index) in 对象"

        v-for循环数字
        v-for="item in 10"
        a:10===[1,2,3,4,5,6,7,8,9,10] 对
        b:10===[0,1,2,3,4,5,6,7,8,9]
        -->
    <ul>
      <template v-for="(item, index) in arr">
        <li v-if="index > 2" :key="index">
          {{ item }}
        </li>
      </template>
    </ul>
    <ul>
      <li v-for="(value, key, index) in obj" :key="index">
        {{ value }}----{{ key }}----{{ index }}
      </li>
    </ul>
    <div v-for="(item, index) in 10" :key="index">{{ item }}</div>
    <!-- v-once -->
    <div v-once>{{ num }}</div>
    <button @click="num++">修改num</button>
    <!-- v-cloak:标签上加入v-cloak后，它在实例化完成前会存在于标签，实例化后会消失
    [v-cloak]{
      display:none
    }
    <div v-cloak id='app'>
    -->
    <!-- v-pre:保持原样输出 -->
    <div v-pre>{{ num }}</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      num: 1,
      msg: '<h2 @click="num++">hello</h2>',
      str: 'hello',
      bol: true,
      val: 'str',
      obj: {
        a: 1,
        b: 2
      },
      isBox: false,
      arr: [1, 2, 3]
    }
  },
  created () {},
  methods: {
    btnClick () {
      console.log('btnClick')
    }
  }
}
</script>
<style scoped>
.box {
  color: red;
}
</style>
